<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .head{
            background-color: aquamarine;
            text-align: center;
            cursor: pointer;
            height: 30px;
            border: 1px solid #000;
        }
        .content{
            background-color: yellow;
            height: 100px;
            text-align: center;
            display: none;
        }
    </style>

    <script>
        var blockDiv;
        window.onload = function (){
            blockDiv = document.getElementById("black");
        }

        function showDiv(divId){
            blockDiv.style.display = "none";
            var divObj = document.getElementById(divId);
            divObj.style.display = "block";

            blockDiv = divObj;
        }
    </script>

</head>
<body>
    <div style="width: 200px;height: 500px;">
        <div class="head" onclick="showDiv('friendDiv')">好友</div>
        <div class="content" id="friendDiv">
            陈近南<br>
            韦小宝<br>
            吴六奇
        </div>
        <div class="head"  onclick="showDiv('colleague')">同事</div>
        <div class="content" id="colleague">
            风际中<br>
            向问天<br>
            令狐冲
        </div>
        <div class="head" onclick="showDiv('black')">黑名单</div>
        <div class="content" id="black" style="display:block;">
            东方不败<br>
            岳不群<br>
            海大富
        </div>
    </div>
</body>
</html>